.container:after,
.container:before {
    content:"";
    display: table;
}
.container:after {
    clear:both;
    overflow: hidden;
}
.container {
    zoom:1;
}
.container,
.content,
.sidebar{
    box-sizing: border-box;
    color: #fff;
}
.container{
    width: 100%;
    max-width: 80em; /* 1280 */
    padding: 2.5em; /* 40 */
    background: #eee;
}
.content,
.sidebar {
    padding:10em 1.25em;
}
/*  -------------------------------------------------------------------------- */  
/*.content{
    width: 80%;  960 
    float: left;
    background: #8ac233;
}
.sidebar{
    width: 16.666%;  200 
    float: right;
    background: #8ac233;
}*/
/*  -------------------------------------------------------------------------- */  
/*.content{
    width: 80%;   
    width: calc( 100% - 15em );   
    float: left;
    background: #8ac233;
}
.sidebar{
    width: 16.666%;   
    width: calc( 12.5em );   
    float: right;
    background: #8ac233;
}*/
/*  -------------------------------------------------------------------------- */  
.content{
    width: 80%; /* 960 */
    width: -webkit-calc( 100% - 15em ); /* 240 */
    width: calc( 100% - 15em ); /* 240 */
    float: left;
    background: #8ac233;
}
.sidebar{
    width: 16.666%; /* 200 */
    width: -webkit-calc(12.5em); /* 200 */
    width: calc(12.5em); /* 200 */
    float: right;
    background: #8ac233;
}
/*  -------------------------------------------------------------------------- */  
@media only screen and (max-width: 40em) /* 640 */{
    .content,
    .sidebar{
        width: 100%;
        float: none;
    }
    .sidebar{
        margin-top: 1.25em; /* 20 */
    }
}